<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>随机显示小星星</title>
	<script>

//计数
var count = 0;


window.onload = function() {


	//定时产生小星星
	window.setInterval("makeStar()",300);
	





}




//生成星星
function makeStar() {
	count += 1;
	//创建图片
	var oImg = document.createElement('img');
	oImg.src = "moren.gif";
	//设置大小
	oImg.width = 0;
	var width = getRandom(30,180);
	becomeBigger(oImg,width);


	//将图片追加到body下
	document.body.appendChild(oImg);
	//设置图片位置
	oImg.style.position = 'absolute';
	var x = getRandom(0,window.innerWidth-100);
	var y = getRandom(0,window.innerHeight);
	oImg.style.left = x+'px';
	oImg.style.top = y+'px';

	//增加删除功能
	oImg.setAttribute('onclick','deleteImg(this)');

	//判断数目
	if (count > 300) {
		alert('阿欧');
		location.href='http://localhost/JS_study/';
	}

}

//产生随机大小
function getRandom(min,max) {
	return Math.round((max-min)*Math.random())+min;
}

//逐渐变大
function becomeBigger(img,width) {
	
	img.timeId = setInterval(function(){
											if (img.width >= width) {
												clearInterval(img.timeId);
											}
											var preWidth = width/5;
											img.width += preWidth;

									},18);
	
}




//删除图片
function deleteImg(obj) {
	count -= 1;
	obj.parentNode.removeChild(obj);
}


	</script>
</head>
<body>
	
</body>
</html>